<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>购物车</title>
    <link rel="stylesheet" type="text/css" href="/shop/css/base.css"/>
    <link rel="stylesheet" type="text/css" href="/shop/css/shopcar.css"/>
    <link rel="stylesheet" type="text/css" href="/shop/css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="/shop/css/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="/shop/css/loading.css"/>
    <link rel="stylesheet" type="text/css" href="/shop/sourse/layer/mobile/need/layer.css">
	<link rel="stylesheet" type="text/css" href="/js/plugins/dialog/dialog.css"/>
    <script src="/shop/js/rem.js"></script> 
    <script src="/shop/js/jquery.min.js" type="text/javascript"></script>
    <script src="/shop/sourse/layer/mobile/layer.js"></script>
	<script src="/js/plugins/jrender/jrender.js"></script>
	<script src="/js/plugins/dialog/dialog.min.js"></script>

	<script type="text/javascript">
		$(window).load(function(){
			$(".loading").addClass("loader-chanage");
			$(".loading").fadeOut(300);

			// 获取用户的购物车信息
			var user = JSON.parse(sessionStorage.getItem("user"));
			$.get("/carts/" + user.id, function (data) {
				if (data.length > 0){
                    $("#carts").renderValues({list:data});
				} else {
				    $("#carts").detach();
                    $(document).dialog({
                        type:"confirm",
                        titleShow:false,
                        content:'空空如也',
                        buttons:[
                            {
                                name: '马上去兑换商品',
                                callback: function () {
                                    location.href = "/mine/index.html";
                                }
                            }
                        ]
                    });
				}
            });
		});
	</script>
</head>
<!--loading页开始-->
<div class="loading">
	<div class="loader">
        <div class="loader-inner pacman">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
	</div>
</div>
<!--loading页结束-->
	<body>
		<!--header star-->
		<!--<header class="mui-bar mui-bar-nav" id="header">-->
			<!--<a class="btn" href="javascript:history.go(-1)">-->
	            <!--&lt;!&ndash;<i class="iconfont icon-fanhui"></i>&ndash;&gt;-->
				<!--<i class="icon icon-return"></i>-->
	        <!--</a>-->
	        <!--<h4>购物车</h4>-->
	    <!--</header>-->

		<header class="mui-bar mui-bar-nav" id="header">
			<a class="btn" href="javascript:history.go(-1)">
				<i class="iconfont icon-fanhui"></i>
			</a>
			<h4>购物车</h4>
			<a class="btn" href="#">
				<i class="iconfont icon-erweima"></i>
			</a>
		</header>

	    <!--header end-->
	    
	    <div class="warp warptwo clearfloat" id="carts">
	    	<div class="shopcar clearfloat" render-loop="list">
	    		<div class="list clearfloat fl">
					<input type="hidden" name="productId" render-value="list.productId"/>
	    			<div class="xuan clearfloat fl">
	    				<div class="radio" > 
						    <label>
						        <input type="checkbox" name="sex" value="" />
						    </label>
						</div>
	    			</div>
	    			<a href="javascript:void(0)">
		    			<div class="tu clearfloat fl">
		    				<span></span>
		    				<img src="" render-src="list.coverUrl"/>
		    			</div>
		    			<div class="right clearfloat fl">
		    				<p class="tit over" render-html="list.productName"></p>
		    				<p class="jifen over" render-html="list.points">100000积分</p>
		    				<div class="bottom clearfloat">
		    					<div class="zuo clearfloat fl">
		    						<ul>
		    							<li><img src="/shop/images/jian.jpg"/></li>
		    							<li render-html="list.count">1</li>
		    							<li><img src="/shop/images/jia.jpg"/></li>
		    						</ul>
		    					</div>
		    					<i class="iconfont icon-lajixiang fr"></i>
		    				</div>
		    			</div>
	    			</a>
	    		</div>
	    	</div>
	    </div>
	    
	    <!--settlement star-->
	    <div class="settlement clearfloat">
	    	<div class="zuo clearfloat fl box-s">
	    		合计：<span></span>
	    	</div>
	    	<a role="button" onclick="goOrder()" class="fl db">
	    		立即兑换
	    	</a>
	    </div>
	    <!--settlement end-->
	    
		<!--footer star-->
	    <footer class="page-footer fixed-footer" id="footer">
			<ul>
				<li>
					<a href="index.html">
						<i class="iconfont icon-shouye"></i>
						<p>首页</p>
					</a>
				</li>
				<li>
					<a href="cation.html">
						<i class="iconfont icon-icon04"></i>
						<p>分类</p>
					</a>
				</li>
				<li class="active">
					<a href="shopcar.html">
						<i class="iconfont icon-gouwuche"></i>
						<p>购物车</p>
					</a>
				</li>
				<li>
					<a href="center.html">
						<i class="iconfont icon-yonghuming"></i>
						<p>我的</p>
					</a>
				</li>
			</ul>
		</footer>
		<!--footer end-->

		<script type="text/javascript">

			// 保存商品信息的数组
			var data = [];
			// 定义数组索引
			var nums = 0;

			// 定义商品所需总积分
			var totalPoints = 0;

			// 复选框点击事件
            $("#carts").on("click",'input[type="checkbox"]', function () {
				// 计算总兑换积分
                tatol();

                if ($(this).prop("checked")){
                    // 获取商品信息, 用于确认订单页面的数据渲染
                    var ele = $(this).parent().parent().parent().parent();
                    var input = $(ele).find("input")[0];
                    var productId = $(input).val();// 商品id
                    var img = $(ele).find("img")[0];
                    var coverUrl = $(img).attr("src");// 商品图片
                    var li = $(ele).find("li")[1];
                    var count = parseInt($(li).html());// 商品总数
                    var p = $(ele).find("p")[1];
                    var points =  parseInt($(p).html());// 商品积分

                    p = $(ele).find("p")[0];
                    var productName = $(p).html();// 商品名



                    // 将商品信息存入数组中
					data[nums] = {productId:productId, coverUrl:coverUrl, count:count, points:points, productName:productName};
					nums ++;

                } else {
                    // 清空数组
					data = [];
					nums = 0;
                    totalPoints = 0;
				}

				// 保存商品数组信息
				sessionStorage.setItem("carts", JSON.stringify(data));

                // 保存商品总积分
				sessionStorage.setItem("totalPoints", JSON.stringify(totalPoints));

            });

			$("#carts").on("click", '.list ul img', function () {
                var val = $(this).parent().parent().children().eq(1);
                if ($(this).parent().index()) {
                    val.html(parseInt(val.html()) + 1);
                } else {
                    val.html(val.html() > 1 ? parseInt(val.html()) - 1 : 1);
                }
                tatol();
            })

            $("#carts").on("click", '.icon-lajixiang', function () {
                var self = this;
                layer.open({
                    content: '确定删除？',
                    btn: ['确定', '取消'],
                    yes: function(index) {
                        // 发送异步请求删除购物车商品
						// 获取商品 id
                        var ele = $(self).parent().parent().parent().parent();
                        var input = $(ele).find("input")[0];
                        var productId = $(input).val();
                        var user = JSON.parse(sessionStorage.getItem("user"));
                        // 发送请求删除购物车商品
						$.ajax({
							url:"/carts",
							type:"POST",
							data:{productId:productId, userId:user.id, _method:"DELETE"}
						});

                        // 删除当前购物车div信息
                        $(self).parent().parent().parent().parent().remove();
                        layer.closeAll();
                        tatol();
                    }
                });
            } )

			var tatol = function() { // 计算总积分
				var count = 0;
				$('.list').map(function(index, item) {
					var $el = $(item);
					if ($el.find('input[type="checkbox"]').is(":checked")) {
						count += parseFloat($el.find('.jifen').html()) * parseInt($el.find('.zuo li').eq(1).html());
					}
				});
				if (count > 0) {
					$('.settlement span').html(count + '积分');
				}

                totalPoints = count;
			}

			// 兑换事件
			function goOrder() {
				if (data.length == 0){
				    // 用户没有选择商品, 提醒选完商品才能兑换下单
                    $(document).dialog({
                        overlayClose: true,
                        content: '请选择兑换积分商品'
                    });
				} else {
				    // 跳转到用户下单界面
					window.location.href = "/mine/confirm.html";
				}
            }



		</script>
		
	</body>

</html>
